// 开发环境和生产环境的共同配置

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
    entry: "./src/index.tsx", // 入口文件
    output: {
        // 输出文件名
        filename: "script/[name].[contenthash].js",
        // 输出路径
        path: resolve(__dirname, "../dist"),
        clean: true, // 打包前清理 dist 文件夹
    },
    // loader 配置
    module: {
        rules: [
            {
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                type: 'asset/resource',
            }
        ]
    },
    // 
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx", ".json"], // 解析文件后缀名
        alias: {
            '@': resolve(__dirname, 'src'),
        },
        plugins: [
            new TsconfigPathsPlugin({
                configFile: resolve(__dirname, "../tsconfig.json"),
            }),
        ],
    },
    // 插件配置
    plugins: [
        new HtmlWebpackPlugin({
            // 这里使用 ./ 而不是 ../ 
            // Webpack 配置里的路径，通常是相对于执行命令时的工作目录（通常是项目根目录），而不是相对于 webpack.config.js 所在的目录。

            // 如果你写成 ../public/index.html 会发生什么？
            // Webpack 会试图从 config/../public/index.html 去找文件，即：my-project/config/../public/index.html
            // → 等于：my-project/public/index.html ✅
            // 其实这个路径也是可以的，但可读性差，也容易出错，特别是团队协作的时候。
            // template: "./public/index.html", // 模板文件           第1种方式
            // template: "config/../public/index.html", //             2
            template: resolve(__dirname, '../public/index.html'), //   3
            minify: {
                removeAttributeQuotes: true, // 删除属性的引号
                collapseWhitespace: true, // 删除空格
                removeComments: true, // 删除注释
            }
        }),

    ]

}